<template>
	<div class="userInfoView" style="margin-top: 100px;">
        <div class="userInfoBox align-center justify-between" style="float: left;">
            <div style="text-align: center;margin-top: 20px;">重复书籍</div>
        	<div class="userInfo flex align-center" style="margin-top: 20px;">
        		<div class="header align-center justify-between">书名</div>
        		<div class="header align-center justify-between">馆藏数量</div>
                <div class="header align-center justify-between">预购数量</div>
        	</div>
            <!-- item S -->
            <div class="userInfo flex align-center" style="margin-top: 20px;">
            	<el-input style="width: 200px;" v-model="info.name" placeholder="请输入书名"></el-input>
                <el-input style="width: 200px; margin-left: 20px;" v-model="info.name" placeholder="请输入书名" :readonly="true"></el-input>
                <el-input style="width: 100px; margin-left: 70px;" v-model="info.name" placeholder="请输入书名"></el-input><span>本</span>
            </div>
            <!-- item E -->
            <!-- item S -->
            <div class="userInfo flex align-center" style="margin-top: 20px;">
            	<el-input style="width: 200px;" v-model="info.name" placeholder="请输入书名"></el-input>
                <el-input style="width: 200px; margin-left: 20px;" v-model="info.name" placeholder="请输入书名" :readonly="true"></el-input>
                <el-input style="width: 100px; margin-left: 70px;" v-model="info.name" placeholder="请输入书名"></el-input><span>本</span>
            </div>
            <!-- item E -->
        </div>
        <div class="userInfoBox align-center justify-between" style="float: right;">
            <div style="text-align: center;margin-top: 20px;">新增书籍</div>
        	<div class="userInfo flex align-center" style="margin-top: 20px;">
                <div class="header align-center justify-between">书名</div>
                <div class="header align-center justify-between"></div>
                <div class="header align-center justify-between">预购数量</div>
        	</div>
            <!-- item S -->
            <div class="userInfo flex align-center" style="margin-top: 20px;">
            	<el-input style="width: 200px;" v-model="info.name" placeholder="请输入书名"></el-input><span>10元</span>
                <div class="header align-center justify-between"></div>
                <el-input style="width: 100px; margin-left: 10px;" v-model="info.name" placeholder="请输入书名"></el-input><span>本</span>
            </div>
            <!-- item E -->
            <!-- item S -->
            <div class="userInfo flex align-center" style="margin-top: 20px;">
            	<el-input style="width: 200px;" v-model="info.name" placeholder="请输入书名"></el-input><span>10元</span>
                <div class="header align-center justify-between"></div>
                <el-input style="width: 100px; margin-left: 10px;" v-model="info.name" placeholder="请输入书名"></el-input><span>本</span>
            </div>
            <!-- item E -->
        </div>
        <div style="clear: both;"></div>
		<div class="flex align-center marginAuto justify-around">
			<el-button @click="submit" class="btnBox" type="primary" style="color: #FFFFFF;">导出</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'adminCompare',
		data() {
			return {
				info: {}
			}
		},
		methods: {
			submit(){
				
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.userInfoView {
        .userInfoBox{
            width: 48%;
            color: gray;
            font-size: 22px;
            border: 1px solid white;
            .userInfo{
                width: 100%;
                border: 1px solid gray;
            }
            .header{
                 margin-left: 20px;
                 width: 30%;
            }
        }
        .btnBox {
        	width: 420px;
        	color: gray;
        	font-size: 22px;
        	margin-top: 100px;
        }
	}
    
</style>
